<template>
    <div class="whole">
        <!-- {{ currentpath }} -->
        <el-container>
            <el-aside style="width: 180px; height: 1020px;">
                <div class="left_title">
                    <el-input v-model="input_querydan" class="input_querydanCSS" placeholder="支持关键字查询">
                        <template #append>
                            <el-button @click="searchdan" icon="el-icon-search" size="small">
                            </el-button>
                        </template>
                    </el-input>
                    <div class="sub_title">档案管理</div>
                </div>
                <div>
                    <el-tree :data="tree_data" :props="defaultProps" ref="treeRef" @node-click="handleNodeClick" node-key="uuid" class="my_tree">
                    </el-tree>
                </div>
            </el-aside>
            <el-main style="width: 90%; min-height: 848px; background-color: rgb(241, 243, 244);">
            <!-- <el-main > -->
                <el-row>
                    <div class="row1">
                        <el-input v-model="input_query" placeholder="请输入, 支持关键字查询" class="input_queryCSS"></el-input>
                        <el-button class="button01" @click="queryClick">查询</el-button>
                    </div>
                </el-row>
                <!-- <el-divider></el-divider> -->
                <div class="el_main_botton">
                    <div class="button_area">
                        <el-button @click="dialogForm1Box" :disabled="currentpath.length>=8" class="button02">创建目录</el-button>
                        <el-button @click="mutipleDownload" :disabled="mutipleSelection.length <= 1" class="button02" style="margin-left: 15px;">批量下载</el-button>
                        <el-button @click="dialogForm2Box" class="button02" style="margin-left: 15px;">文件上传</el-button>
                        <el-select v-model="only_Value" placeholder="请选择" class="showWho_SeCSS">
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </div>
                    <div class="table_area">
                        <el-table :data="showWho" style="width:100%" @selection-change="handleSelectionChange" @row-click="handClickTableItem" ref="table" :header-cell-style="{background: '#ecf8f9', color: '#606266'}">
                            <el-table-column type="selection" width="55"/>
                            <el-table-column label="序号" type="index" width="150">
                                <template slot-scope="{ $index }">
                                    {{ ($index+1).toString().padStart(2, '0') }}
                                </template>
                            </el-table-column>
                            <el-table-column label="名称" width="200">
                                <template #default="{row}">
                                    <span v-if="row.fileName"> {{ row.fileName }}</span>
                                    <span v-else>{{ row.dirName }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="fileType" label="文件类型" width="250"/>
                            <el-table-column prop="fileSize" label="文件大小" width="300"/>
                            <el-table-column prop="modifyTime" label="创建日期" width="300"/>
                            <el-table-column label="操作" width="210">
                                <template slot-scope="scope">
                                    <el-button link type="text" size="small" @click.stop="handleDownload(scope.row)" v-if="scope.row.fileSize" style="color:#47c9ad;">下载</el-button>
                                    <el-button link type="text" size="small" @click.stop="handleModifyDoc(scope.row)" v-if="scope.row.fileSize" style="color:#47c9ad;">修改</el-button>
                                    <el-button link type="text" size="small" @click.stop="handleModifyDir(scope.row)" v-if="!scope.row.fileSize" style="color:#47c9ad;">修改</el-button>
                                    <el-button link type="text" size="small" @click.stop="handleDelete(scope.row)" style="color:#47c9ad;">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </el-main>
        </el-container>

        <el-dialog :visible.sync="dialogForm1Visible" title="创建目录">
            <el-row>
                <el-col :span="2" :offset="2">
                    <span style="font-size: 20px; font-weight: bold">目录名称</span>
                </el-col>
                <el-col :span="15" :offset="1">
                    <el-input v-model="mkdir_dirName"></el-input>
                </el-col>
            </el-row>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogForm1_submit" size="large">提交</el-button>
                    <el-button @click="dialogForm1Visible = false" size="large">取消</el-button>
                </span>
            </template>
        </el-dialog>

        <el-dialog :visible.sync="dialogForm2Visible" title="文件上传">
            <el-row>
                <el-col :span="8" :offset="8" >
                    <el-upload
                        ref="uploadRef"
                        :action="upload_path"
                        :limit="1"
                        :auto-upload="false"
                        :data="uploadData"
                        :before-upload="handleBeforeUpload"
                        :on-success="uploadSuccess"
                        :file-list="fileList"
                        drag
                    >
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">
                        Drop file here or <em>click to upload</em>
                    </div>
                    </el-upload>
                </el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row>
                <el-col :span="2" :offset="2">
                    <span style="font-size: 20px; font-weight: bold;">备注信息</span>
                </el-col>
                <el-col :span="15" :offset="1">
                    <el-input
                        v-model="dialogForm2Box_BZ"
                        type="textarea"
                        placeholder="备注栏"
                        :rows="3"></el-input>
                </el-col>
            </el-row>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dia3_submit" size="large">上传</el-button>
                    <el-button @click="dia3_cancel" size="large">取消</el-button>
                </span>
            </template>
        </el-dialog>

        <el-dialog :visible="dialogForm3Visible" title="修改文件信息">
            <el-row>
                <el-col :span="2" :offset="2">
                    <span style="font-size: 20px; font-weight: bold">文件名</span>
                </el-col>
                <el-col :span="5">
                    <el-input v-model="dia3_fileName"></el-input>
                </el-col>
                <el-col :span="2" :offset="2">
                    <span style="font-size: 20px; font-weight: bold">文件类型</span>
                </el-col>
                <el-col :span="5">
                    <el-input v-model="dia3_fileType" disabled></el-input>
                </el-col>
            </el-row>
            <el-row style="padding-top: 20px;">
                <el-col :span="2" :offset="2">
                    <span style="font-size: 20px; font-weight: bold">文件位置</span>
                </el-col>
                <el-col :span="12" :offset="1">
                    <el-input v-model="dia3_filePosition" disabled></el-input>
                </el-col>
            </el-row>
            <el-row style="padding-top: 20px;">
                <el-col :span="2" :offset="2">
                    <span style="font-size: 20px; font-weight: bold">文件大小</span>
                </el-col>
                <el-col :span="5" >
                    <el-input v-model="dia3_fileSize" disabled></el-input>
                </el-col>
                <el-col :span="2" :offset="2">
                    <span style="font-size: 20px; font-weight: bold">下载次数</span>
                </el-col>
                <el-col :span="5">
                    <el-input v-model="dia3_downloadNum" disabled></el-input>
                </el-col>
            </el-row>
            <el-row style="padding-top: 40px">
                <el-col :span="2" :offset="2">
                    <span style="font-size: 20px; font-weight: bold;">备注信息</span>
                </el-col>
                <el-col :span="15" :offset="1">
                    <el-input
                        v-model="dialogForm3Box_BZ"
                        type="textarea"
                        placeholder="备注栏"
                        :rows="3"></el-input>
                </el-col>
            </el-row>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="modifyCommitDoc" size="large">上传</el-button>
                    <el-button @click="dialogForm3Visible = false" size="large">取消</el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog :visible.sync="dialogForm4Visible" title="修改目录">
            <el-row>
                <el-col :span="2" :offset="2">
                    <span style="font-size: 20px; font-weight: bold">目录名称</span>
                </el-col>
                <el-col :span="15" :offset="1">
                    <el-input v-model="dia4_dirName"></el-input>
                </el-col>
            </el-row>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="modifyCommitDir" size="large">提交</el-button>
                    <el-button @click="dialogForm4Visible = false" size="large">取消</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>

import axios from 'axios'


// ***********************************************************************

const defaultProps = {
    label: 'dirName',
    children: 'children'
}

// ***********************************************************************

// 右侧 树状navigation
let treeNode_path = '/mock/dashanmao/KnowledgeBaseDetail/tree_node.json'

// 树状navigation 关键字查询请求路径
let inputquerydan_path = '/mock/dashanmao/KnowledgeBaseDetail/tree_node2.json'

// 目录内容请求路径
let dirpath = '/mock/dashanmao/KnowledgeBaseDetail/dir_content.json'

// 右侧 树状navigation
// 实际上 != dirpath, 因为 参数为: currentpath, keywords
let wordsquery_path = '/mock/dashanmao/KnowledgeBaseDetail/dir_content2.json'

// 批量下载请求路径 
let mutipleDownload_path = ''

// 创建目录请求路径 
let mkdir_path = ''

// 上传文件请求路径 
let upload_path = ''

// 修改文件请求路径 
let modifydir_path = ''

// 修改目录请求路径 
let modifydoc_path = ''

// 删除请求路径 
let delete_path = ''

// 单文件下载请求路径 
let download_path = ''
// ***********************************************************************

export default {
    name: 'KnowledgeBaseDetail',
    data: function() {
        return {
            // currentpath
            currentpath: [],
            // 右侧树状navigation
            tree_data: [],
            defaultProps: defaultProps,
            // 左侧搜索框
            input_querydan: '',
            // 关键字查询 
            input_query: '',
            // "仅显示文件/目录"
            checkedQuery: [],
            // showWho
            showWho: [],
            // tableData
            tableData: {"dirs":[], "file":[]},
            mutipleSelection: [],
            // 创建目录 dia1
            dialogForm1Visible: false,
            mkdir_dirName: '',
            // 上传 dia2
            dialogForm2Visible: false,
            upload_path: upload_path,
            uploadData: {BZ:null},
            dialogForm2Box_BZ: '',
            fileList: [],
            // dia3: 文件修改
            dialogForm3Visible: false,
            dia3_fileName: '',
            dia3_fileType: '',
            dia3_filePosition: '',
            dia3_fileSize: '',
            dia3_downloadNum: '',
            dia3_diruuid: '',
            dialogForm3Box_BZ: '',
            // dia4: 目录修改
            dialogForm4Visible: false,
            dia4_dirName: '',
            dia4_diruuid: '',

            // change
            // 下拉菜单
            only_Value: '',
            options: [{
                value: 'All',
                label: "全部"
            }, {
                value: 'OnlyDir',
                label: '仅展示目录'
            }, {
                value: 'OnlyDocument',
                label: '仅展示文件'
            }]
        }
    },
    methods: {
        
        // 右侧树状navigation
        handleNodeClick: function(who, nodeProps) {

            this.currentpath = []

            let tmp_node = nodeProps

            do {
                let tmp = {"dirName": tmp_node.data.dirName, 'uuid': tmp_node.data.uuid}
                this.currentpath.unshift(tmp)

                // console.log("before: tmp_node.parent.id", tmp_node.parent.id)
                tmp_node = this.$refs.treeRef.getNode(tmp_node.parent)
            }while(tmp_node.parent!=null)
        },
        
        // 仅显示文件 or 仅显示目录
        handOnlyChange: function() {
            setTimeout(() => {
                if(this.only_Value == "OnlyDir"){
                    this.showWho.splice(0, this.showWho.length)
                    this.showWho.push(...this.tableData.dirs)
                } else if (this.only_Value == "OnlyDocument") {
                    this.showWho.splice(0, this.showWho.length)
                    this.showWho.push(...this.tableData.file)
                } else {
                    this.showWho.splice(0, this.showWho.length)
                    this.showWho.push(...this.tableData.dirs)
                    this.showWho.push(...this.tableData.file)
                }
            }, 100);
        },

        // 关键字查询
        queryClick: function() {
            if(this.input_query==''){
                window.alert("查询字段为空")
            } else {

                axios.get(wordsquery_path, {
                    params: {
                        currentpath: this.currentpath,
                        keywords: this.input_query
                    }
                })
                .then((resp)=>{
                    console.log("关键字查询成功")
                    this.tableData = resp.data
                    this.input_query = ''
                })
                .catch((err)=>{
                    console.log("关键字查询失败", err)
                })
            }
        },

        // "返回上一级" 按钮
        comeBackDir: function() {
            if(this.currentpath.length > 1){
                this.currentpath.pop()
            }
        },

        // 多选
        handleSelectionChange: function(val) {
            this.mutipleSelection = val
        },

        // 批量下载
        mutipleDownload: function() {
            axios.get(mutipleDownload_path, {
                params: {
                    TFkmFileList: this.mutipleSelection,
                    TFkmDirList: this.currentpath
                }
            })
            .then((resp)=>{
                // window.open(resp.data.downloadURL)
                const blob = new Blob([resp.data])
                const url = URL.createObjectURL(blob)
                const link = document.createElement('a')

                link.href = url
                link.download = 'files.zip'

                link.click();
                URL.revokeObjectURL(url)

                this.$refs.table.clearSelection()
            })
            .catch((err)=>{
                window.alert("批量下载失败")
                console.log(err)

                this.$refs.table.clearSelection()
            })
        },

        // 点击 文件item, 能够进入
        handClickTableItem: function(row) {
            if(row.fileType === 'dir') {
                this.currentpath.push({
                    dirName: row.dirName,
                    uuid: row.uuid
                })
            }
        },
        
        // 创建目录
        dialogForm1Box: function() {
            this.dialogForm1Visible = true
        },

        dialogForm1_submit: function() {
            axios.get(mkdir_path, {
                params: {
                    mkdir_dirName: this.mkdir_dirName,
                    currentpath: this.currentpath
                }
            })
            .then(()=>{
                window.alert("创建目录成功")

                setTimeout(()=>{
                    this.rebirthContent()
                }, 100)
            })
            .catch((err)=>{
                window.alert("创建目录失败")
                console.log(err)
            })
            
            this.mkdir_dirName = ''
            this.dialogForm1Visible = false
        },

        // 文件上传
        dialogForm2Box: function() {
            this.dialogForm2Visible = true
        },
        
        handleBeforeUpload: function() {
            this.uploadData.BZ = this.dialogForm2Box_BZ

            return true
        },
        
        dia3_submit: function() {
            this.$refs.uploadRef.submit()
            
            this.dialogForm2Visible = false
            this.dialogForm2Box_BZ = ''

            setTimeout(()=>{
                this.rebirthContent()
            }, 100)
        },

        dia3_cancel: function() {
            this.dialogForm2Visible = false

            this.$refs.uploadRef.clearFiles()
            this.dialogForm2Box_BZ = ''
        },
        
        uploadSuccess: function() {
            setTimeout(()=>{
                this.$refs.uploadRef.clearFiles()
            }, 100)
        },

        // 文件修改
        handleModifyDoc(row){
            this.dialogForm3Visible = true

            this.dia3_fileName = (row.fileName? row.fileName:row.dirName)
            this.dia3_fileType = row.fileType
            this.dia3_fileSize = row.fileSize
            this.dia3_downloadNum = row.downloadNum
            this.dia3_diruuid = (row.diruuid || row.uuid)

            let tmp = ''
            for(let i=0; i<this.currentpath.length; i++){
                // console.log(this.currentpath[i])
                tmp += this.currentpath[i].dirName
                if(i!=this.currentpath.length-1){
                    tmp += " / "
                }
            }

            this.dia3_filePosition = tmp
        },

        modifyCommitDoc: function() {
            axios.get(modifydoc_path, {
                params: {
                    fileName: this.dia3_fileName,
                    downloadNum: this.downloadNum,
                    fileSize: this.fileSize,
                    BZ: this.dialogForm3Box_BZ,
                    dir_uuid: this.dia3_diruuid,
                    toWhere: this.dia3_filePosition
                }
            })
            .then(()=>{
                window.alert("上传成功")

                this.dialogForm3Visible = false

                setTimeout(()=>{
                    this.rebirthContent()
                }, 100)
            })
            .catch((err)=>{
                window.alert("修改失败")
                console.log(err)
                
                this.dialogForm3Visible = false
            })
        },

        // 修改目录
        handleModifyDir: function(row) {
            this.dialogForm4Visible = true
            
            this.dia4_dirName = (row.fileName? row.fileName:row.dirName)
            this.dir_uuid = row.uuid
        },

        modifyCommitDir: function() {
            axios.get(modifydir_path, {
                params: {
                    dirName: this.dia4_dirName,
                    uuid: this.dia4_diruuid,
                }
            })
            .then(()=>{
                window.alert("上传成功")

                this.dialogForm4Visible = false
                setTimeout(()=>{
                    this.rebirthContent()
                }, 100)
            })
            .catch((err)=>{
                window.alert("修改失败")
                console.log(err)

                this.dialogForm4Visible = false
            })
        },

        // 文件删除
        handleDelete(row) {
            axios.get(delete_path, {
                params: {
                    One_detaiil: row
                }
            })
            .then(()=>{
                window.alert("删除成功")
                setTimeout(()=>{
                    this.rebirthContent()
                }, 100)
            })
            .catch((err)=>{
                window.alert("删除失败")
                console.log(err)
            })
        },

        // 单文件下载
        handleDownload: function(row) {
            axios.get(download_path, {
                params: {
                    TFkmFile: row,
                    TFkmDirList: this.currentpath
                }
            })
            .then((resp)=>{
                window.open(resp.data.downloadURL, '_blank')
            })
            .catch((err)=>{
                window.alert("下载失败")
                console.log(err)
            })
        },
        
        // 操作后, 重新渲染
        rebirthContent: function() {
            axios.get(dirpath, {
                params: {
                    currentpath: this.currentpath
                }
            })
            .then((resp)=>{
                this.tableData = resp.data
            })
            .catch((err)=>{
                console.log("出错1", err)
            })

        },

        // 左侧搜索栏
        searchdan: function() {
            let aim_path = ''

            if(this.input_querydan != ''){
                aim_path = inputquerydan_path
            } else {
                aim_path = treeNode_path
            }
            
            axios.get(aim_path, {
                params: {
                    dan_keyword: this.input_querydan
                }
            })
            .then((resp)=>{
                this.tree_data = resp.data.data
            })
            .catch((err)=>{
                console.log(err)
            })
        }
        
    },
    mounted() {
        axios.get(treeNode_path) // 右侧树状navigation
        .then((resp) => {
            console.log("请求成功")
            // this.tree_data.push(...resp.data.data)
            this.tree_data = resp.data.data
        })
        .catch((err)=>{
            console.log("请求失败", err)
        })
    },
    watch: {
        // 当 当前路径变化时, 会更新表格内容
        currentpath: function() {
            axios.get(dirpath, {
                params: {
                    currentpath: this.currentpath
                }
            })
            .then((resp)=>{
                this.tableData = resp.data
            })
            .catch((err)=>{
                console.log("出错1", err)
            })
        },

        tableData: function() {
            this.showWho.splice(0, this.showWho.length)
            this.showWho.push(...this.tableData.dirs)
            this.showWho.push(...this.tableData.file)
        },

        only_Value: function() {
            this.handOnlyChange()
        }
    }
}
</script>

<style scoped>

    .myBreadcrumb {
        padding: 12px 5px;
    }

    .sub_title {
        font-size: 14px;
        font-weight: bold;
        padding: 0 10% 3%;
    }
    
    .my_tree {
        /* background-color: pink; */
        border: 10px, solid, black;
    }

    .my_tree >>> .el-tree-node__content{
        /* background-color: pink; */
        /* border: 1px solid black; */
        height: 50px;
    }
    
    .input_queryCSS {
        width: 280px;
        height: 32px;
    }

    .row1 {
        /* background-color: pink; */
        background-color: white;
        padding: 10px 20px 10px;
        width: 1468px;
    }

    .button_area {
        /* background-color: pink; */
        width: 1468px;
        margin-left: 20px;
        margin-bottom: 13px;
    }

    .button02 {
        width: 80px;
        font-size: 14px;
        padding-left: 10px;
    }

    .table_area {
        background-color: green;
        /* background-color: white; */
        border: 1px solid rgb(224, 232, 231);
        margin-left: 20px;
        margin-right: 21px;
    }
    
    .showWho_SeCSS {
        margin-left: 1000px;
        width: 155px;
    }

    .el_main_botton {
        /* background-color: black; */
        width: 1508px;
        background-color: white;
        margin-top: 10px;
        padding: 30px 0 0 0px;
        min-height: 100%;
    }
    
    .input_querydanCSS {
        margin: 20px;
        width: 140px;
        height: 36px;
        border: 1px solid #02A9AB;
        border-radius: 19px;
        font-size: 11px;
    }

    .input_querydanCSS >>> .el-input__inner {
        padding: 0 0 0 10px;
    }

    .input_querydanCSS >>> .el-input__inner {
        background-color: transparent;
        border: 0;
        border-radius: 95px;
    }

    .input_querydanCSS >>> .el-input-group__append {
        background-color: transparent;
        border: 0;
        border-radius: 100px;
    }

    :deep(.el-icon-search) {
        font-size: 20px;
        color: rgb(157, 222, 223)
    }

    .left_title {
        border-bottom: 1px solid rgb(223, 217, 217);
    }

    .button01 {
        margin-left: 8px;
        background: linear-gradient(136deg, #01A29D 0%, #1D75C3 100%);
        color: white;
    }

</style>